<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>边栏过渡效果（Sidebar Transitions）</title>
		<meta name="description" content="Sidebar Transitions: Transition effects for off-canvas views" />
		<meta name="keywords" content="transition, off-canvas, navigation, effect, 3d, css3, smooth" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/demo.css" />
		<!-- <link rel="stylesheet" type="text/css" href="css/icons.css" /> -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/component.css" />
		<style>
		.top-banner {
			z-index: 999;
			text-align: right;
			height: 30px !important;
			line-height: 30px !important;
		}
		.top-banner a {
			color:green !important;
			text-shadow: none;
		}
		.column {
			margin: 60px auto;
			float: none;
			text-align: center;
			width: 75%;
			min-height: 100px;
		}
		</style>
		<script src="${pageContext.request.contextPath }/js/modernizr.custom.js"></script>	
	</head>
	<body>
		<div id="st-container" class="st-container">
			<!-- 	
				example menus 
				these menus will be on top of the push wrapper
			-->
			<nav class="st-menu st-effect-1" id="menu-1">
			
				<h2 class="icon icon-lab"  >个人主页</h2>
				<ul>
					
					<li><a class="icon icon-location" href="#">基本信息</a></li>
					<li><a class="icon icon-study" href="#">合同信息</a></li>
					<li><a class="icon icon-photo" href="#">资质信息</a></li>
					<li><a class="icon icon-wallet" href="#">加班信息</a></li>
					<li><a class="icon icon-wallet" href="#">休假记录</a></li>
				</ul>
			</nav>

				<div class="st-content"><!-- this is the wrapper for the content -->
					<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
						<header class="codrops-header">
							<h1>员工个人信息页面</h1>
						</header>
						<div class="main clearfix">
							<div id="st-trigger-effects" class="column" >
								<button data-effect="st-effect-1">效果一</button>

							</div>
						</div><!-- /main -->
						<div class="footer-banner" style="width:728px; margin:160px auto 0"></div>
					</div><!-- /st-content-inner -->
				</div><!-- /st-content -->
			</div><!-- /st-pusher -->
		</div><!-- /st-container -->
		<script src="${pageContext.request.contextPath }/js/classie.js"></script>
		<script src="${pageContext.request.contextPath }/js/sidebarEffects.js"></script>
	</body>
</html>